<template>
  <div class="monitoring-control">
    <!-- 非工装标签页下的按钮 -->
    <template v-if="!isFixtureTab">
      <button v-if="monitoringStarted" class="cancel-button" @click="showStopMonitoringConfirm">
        取消
      </button>
      <button v-else class="confirm-button" @click="showStartMonitoringConfirm">
        确定
      </button>
    </template>

    <!-- 工装标签页下的按钮 -->
    <template v-else>
      <button class="confirm-button" @click="closeDialog">确定</button>
    </template>

    <!-- 开始监测确认弹框 -->
    <StartMonitoringDialog v-model="showStartMonitoringDialog" @confirm="handleStartMonitoringConfirm">
    </StartMonitoringDialog>

    <!-- 停止监测确认弹框 -->
    <StopMonitoringDialog v-model="showStopMonitoringDialog" :from-close-button="fromCloseButton"
      @confirm="handleStopMonitoringConfirm">
    </StopMonitoringDialog>
  </div>
</template>

<script>
import StopMonitoringDialog from '@/pages/monitor/components/StopMonitoringDialog.vue'
import { writeBLEState } from '@/public/BluetoothFun'
import { handleConnect } from '@/public/ConnectBLE'
import { mapState, mapMutations } from 'vuex'
import StartMonitoringDialog from '@/pages/userMenu/components/StartMonitoringDialog.vue'

export default {
  name: 'MonitoringControl',

  components: {
    StartMonitoringDialog,
    StopMonitoringDialog,
  },

  props: {
    // 是否是工装标签页
    isFixtureTab: {
      type: Boolean,
      default: false,
    },
    // 监测是否已开始
    monitoringStarted: {
      type: Boolean,
      default: false,
    },
    // 是否从关闭按钮触发
    fromCloseButton: {
      type: Boolean,
      default: false,
    },
    // 当前选择的脑区
    selectedBrain: {
      type: String,
      default: 'left',
    },
  },

  data() {
    return {
      showStartMonitoringDialog: false,
      showStopMonitoringDialog: false,
    }
  },

  computed: {
    // 从Vuex状态管理器中映射需要的状态
    ...mapState(['isConnected']),
  },

  methods: {
    // 从Vuex映射需要的mutations
    ...mapMutations(['setIsConnected']),

    /**
     * 显示开始监测确认弹框
     */
    showStartMonitoringConfirm() {
      this.showStartMonitoringDialog = true
    },

    /**
     * 显示停止监测确认弹框
     */
    showStopMonitoringConfirm() {
      this.$emit('update:fromCloseButton', false) // 更新父组件中的fromCloseButton值
      this.showStopMonitoringDialog = true
    },

    /**
     * 关闭弹框
     */
    closeDialog() {
      this.$emit('close')
    },    /**
     * 处理开始监测确认
     * 直接开始监测，不再进行蓝牙连接
     */
    handleStartMonitoringConfirm() {
      // 直接调用开始监测方法，不再进行蓝牙连接
      console.log('确认开始监测')
      this.startMonitoring()
    },

    /**
     * 处理停止监测确认
     */
    handleStopMonitoringConfirm() {
      // 显示加载提示
      uni.showLoading({
        title: '停止监测中...',
      })

      // 调用蓝牙通信函数停止监测
      writeBLEState(99)

      // 延迟一段时间后隐藏加载提示并更新状态
      setTimeout(() => {
        uni.hideLoading()

        // 更新监测状态，恢复标签页可点击状态
        this.$emit('update:monitoringStarted', false)

        // 发送停止监测的通知或事件
        this.$emit('monitoring-stopped')

        // 如果是从关闭按钮触发的，则关闭整个弹框
        if (this.fromCloseButton) {
          // 清空阻抗数据
          this.$emit('clear-impedance-data')

          // 重置状态
          this.showStopMonitoringDialog = false
          this.$emit('update:fromCloseButton', false)

          // 向父组件发送关闭事件
          this.$emit('close')
        } else {
          // 隐藏停止监测确认弹框
          this.showStopMonitoringDialog = false
        }

        uni.showToast({
          title: '已停止监测',
          icon: 'success',
          duration: 2000,
        })
      }, 1500)
    },    /**
     * 开始监测
     * 需要在蓝牙连接状态才能进行监测
     */
    startMonitoring() {
      // 检查蓝牙连接状态
      if (!this.isConnected) {
        uni.showToast({
          title: '请先连接蓝牙设备',
          icon: 'none',
          duration: 2000,
        })
        
        // 隐藏开始监测确认弹框
        this.showStartMonitoringDialog = false
        return
      }
        // 清空之前的阻抗数据
      this.$emit('clear-impedance-data')

      // 更新监测状态
      this.$emit('update:monitoringStarted', true)      // 先调用初始化指令
      writeBLEState(40)
      console.log('发送初始化指令')
      
      // 添加延迟后再根据选择的脑区调用不同的蓝牙通信函数
      setTimeout(() => {
        if (this.selectedBrain === 'left') {
          // 左脑
          writeBLEState(6)
          console.log('开始左脑监测')
        } else {
          // 右脑
          writeBLEState(7)
          console.log('开始右脑监测')
        }
      }, 2000) // 延迟2000毫秒(2秒)后执行

      // 发送开始监测的通知或事件
      this.$emit('monitoring-started')

      // 提示用户在监测过程中不能切换标签页
      uni.showToast({
        title: '监测中，标签页暂不可切换',
        icon: 'none',
        duration: 2000,
      })

      // 隐藏开始监测确认弹框
      this.showStartMonitoringDialog = false
    },
  },
}
</script>

<style scoped lang="scss">
.monitoring-control {
  display: flex;
  justify-content: center;
  gap: 10px;

  .confirm-button {
    padding: 8px 36px;
    background-color: #4de6c2;
    color: black;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #3fcfad;
    }
  }

  .cancel-button {
    padding: 8px 36px;
    background: white;
    color: black;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
}
</style>